<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import scroll from '../widget.scroll.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'View',
        remark: `
				  <p>
					  一) 视图定义了一个区域范围，这个范围的用途是：
            <div>&nbsp; 1. 调用view的f() fv() find()等方法，查找范围都限定在当前view以内。</div>
            <div>&nbsp; 2. 在这个view内的任何一个widget调用submit()方法，将提交这个view内的表单。</div>
					</p>
					<p>二) View继承自Vertical，因此具有Vertical所有功能和属性。</p>
					<p>三) 实际开发中，每个业务模块原则上都应该以w-view作为根元素(dialog本身是view，可以不加)。</p>
          `,
        extends: [scroll],
        attrs: [],
        methods: [{
          name: 'f(name)',
          remark: '根据name获取表单组件',
          option: `<div><var>name</var>: String 表单名</div>`,
          return: '返回表单组件',
          examples: [{
            remark: '获取name为user的表单',
            code: `
              let f = $.vm(target).f('user')
              console.log(f.val()) //打印表单值
            `
          }]
        },{
          name: 'fAll(name)',
          remark: '获取所有相同name的表单组件，返回数组',
          option: `<div><var>name</var>: String 表单名</div>`,
          return: '返回数组',
          examples: [{
            remark: '获取所有name为user的表单',
            code: `
              let f = $.vm(target).fAll('user')
              console.log(f.length) //打印数组的元素个数
            `
          }]
        },{
          name: 'find(key)',
          remark: '根据key获取widget',
          option: `<div><var>key</var>: String 设置在widget上的key</div>`,
          return: '返回数组',
          examples: [{
            remark: '根据key获取表单，点击按钮显示表单值',
            type: 'html',
            view: true,
            expanded: true,
            code: `
              <template>
                <w-view>
                  <w-horizontal gap="10">
                    <w-text key="user" width="*" model-value="hello"></w-text>
                    <w-button @click="click" text="显示值"></w-button>
                  </w-horizontal>
                </w-view>
              </template>
              <${'script'}>
                export default {
                  methods: {
                    click(e) {
                      let value = $.vm(e).find('user').val()
                      $.alert(value)
                    }
                  }
                }
              </${'script'}>
            `,
						comp: {
							methods: {
							  click(e) {
							    let value = $.vm(e).find('user').val()
							    $.alert(value)
							  }
							}
						}
          }]
        }, {
          name: 'fv(name, [modelValue])',
          remark: '获取/设置表单值',
          option: `<div><var>name</var>: String 表单名</div>
             <div><var>modelValue</var>: String|Object 设置表单值</div>`,
          return: '返回modelValue',
          examples: [{
            remark: '获取name为user的表单值',
            code: `
              let v = $.vm(target).fv('user')
            `
          }]
        }, {
          name: 'isModified([range])',
          remark: '检测表单是否有修改',
          option: '<div><var>range</var>: Component|Array 限定检测范围</div>',
          return: '返回有修改的表单组件'
        }, {
          name: 'saveModified([range])',
          remark: '把当前的表单值保存为默认值',
          option: '<div><var>range</var>: Component|Array 限定保存范围</div>',
          return: ''
        },{
          name: 'getPostData([range])',
          remark: '获取当前view的表单数据',
          option: '<div><var>range</var>: Component|Array 限定获取范围</div>',
          return: 'JSON对象'
        },{
          name: 'valid([range])',
          remark: '验证当前view的表单',
          option: '<div><var>range</var>: Component|Array 限定验证范围</div>',
          return: 'Promise对象。resolve结果为true/false',
          examples: [{
            remark: '验证View里面所有表单',
            code: `
              let v = await $.vm(target).valid()
            `
          },{
            remark: '验证View里面的某个表单',
            code: `
              let v = await $.vm(target).valid([this.$refs.myForm])
            `
          }]
        }],
      }
    },

  }
</script>

<style>
</style>
